<template>
  <div class="pb-[10px] s2k:pb-[13.3px]">
    <div class="flex flex-row justify-between items-center">
      <div class="content" v-if="!tabInput">
        {{ content }}
        <svg-icon name="edit" width="20px" height="20px" class="svgClass cursor-pointer ml-[5px] s2k:ml-[6.67px] s4k:ml-[10px] svg2k"
          @click="tabInput = true"></svg-icon>
      </div>
      <div v-else class="content flex flex-row justify-start items-center">
        <input v-model="tabName" type="text" class="w-[364px] h-[34px] bg-[var(--layout-progress-bg)] s4k:w-[728px] s4k:h-[68px] s2k:w-[485px] s2k:h-[45px]" id="input">
        <svg-icon name="sure" width="16px" height="16px" class="svgSure mx-[15px] cursor-pointer s4k:mx-[30px] s2k:mx-[20px] svg2k"
          @click="sureTabName"></svg-icon>
        <svg-icon name="close" width="16px" height="16px" class="svgClass cursor-pointer svg2k"
          @click="cancelTabName"></svg-icon>
      </div>
      <div>
        <!-- <span v-for="v in 9" :key="v" class="text-white ml-[20px] cursor-pointer" @click="gridIndex = v">{{ v }}</span> -->
        <svg-icon v-for="v in 9" :key="v" :name="'grid' + v" width="40px" height="32px"
          :class="['svgGrid cursor-pointer ml-[0px] p-[8px] rounded-md s2k:rounded-[8px] s2k:ml-[13.3px] s2k:s4k:p-[5.3px] s4k:m-[20px] s4k:p-[8px]', gridIndex == v ? 'bg-[var(--layout-progress-bg)] svgSelect' : '']"
          @click="handleClick(v)"></svg-icon>
      </div>
    </div>
    <div v-for="grid in gridData" :key="grid.parent">
      <GridMain
        :parent="grid.parent"
        :gridNum="grid.gridNum"
        :addWidth="grid.addWidth"
        :addHeight="grid.addHeight"
        :closeSize="grid.closeSize"
        :camera_m_w="grid.camera_m_w"
        :camera_m_h="grid.camera_m_h"
        :wabeiSize="grid.wbeiSize"
        :fullSize="grid.fullSize"
        :IDsize="grid.IDsize"
        :Losize="grid.Losize"
        :recw="grid.recw"
        :rech="grid.rech"
        :boxSize="grid.boxSize"
        v-if="gridIndex == grid.parent"
      ></GridMain>
    </div>
  </div>
</template>

<script setup>
import cover from '@/assets/image/cover.png'
import { onMounted, reactive, ref, getCurrentInstance, nextTick } from "vue";
import { FwbInput } from 'flowbite-vue'
const props = defineProps({
  content: String,
  name: String,
})
// 修改 tabName
const tabInput = ref(false)
const tabName = ref('')
onMounted(() => {
  tabName.value = props.content
})

let $emit = defineEmits(['passonName']);
const sureTabName = () => {
  $emit('passonName', tabName.value, props.name);
  tabInput.value = false;
};
const cancelTabName = () => {
  tabName.value = props.content
  tabInput.value = false
};
const gridIndex = ref(1)
const handleClick = (val) => {
  gridIndex.value = val
}
const gridData = ref([
  {parent: '1', gridNum: '1', addWidth: '60px', addHeight: '60px', closeSize: '20px', camera_m_w: '30px', camera_m_h: '30px', fullSize: '30px', wbeiSize: '30px', IDsize: '13px', Losize: '12px', recw: '42px', rech: '19px', boxSize: '30px',},
  {parent: '2', gridNum: '4', addWidth: '50px', addHeight: '50px', closeSize: '20px', camera_m_w: '25px', camera_m_h: '25px', fullSize: '25px', wbeiSize: '25px', IDsize: '12px', Losize: '12px', recw: '42px', rech: '19px', boxSize: '25px',},
  {parent: '3', gridNum: '9', addWidth: '40px', addHeight: '40px', closeSize: '14px', camera_m_w: '25px', camera_m_h: '25px', fullSize: '25px', wbeiSize: '25px', IDsize: '12px', Losize: '11px', recw: '25px', rech: '14px', boxSize: '25px',},
  {parent: '4', gridNum: '6', addWidth: '40px', addHeight: '40px', closeSize: '14px', camera_m_w: '30px', camera_m_h: '30px', fullSize: '28px', wbeiSize: '30px', IDsize: '12px', Losize: '11px', recw: '30px', rech: '19px', boxSize: '28px',},
  {parent: '5', gridNum: '16', addWidth: '30px', addHeight: '30px', closeSize: '12px', camera_m_w: '22px', camera_m_h: '22px', fullSize: '22px', wbeiSize: '22px', IDsize: '12px', Losize: '10px', recw: '30px', rech: '14px', boxSize: '20px',},
  {parent: '6', gridNum: '13', addWidth: '30px', addHeight: '30px', closeSize: '12px', camera_m_w: '18px', camera_m_h: '12px', fullSize: '18px', wbeiSize: '20px', IDsize: '10px', Losize: '10px', recw: '30px', rech: '14px', boxSize: '17px',},
  {parent: '7', gridNum: '10', addWidth: '30px', addHeight: '30px', closeSize: '12px', camera_m_w: '12px', camera_m_h: '12px', fullSize: '12px', wbeiSize: '13px', IDsize: '12px', Losize: '10px', recw: '30px', rech: '14px', boxSize: '13px',},
  {parent: '8', gridNum: '8', addWidth: '30px', addHeight: '30px', closeSize: '10px', camera_m_w: '15px', camera_m_h: '15px', fullSize: '14px', wbeiSize: '15px', IDsize: '12px', Losize: '10px', recw: '30px', rech: '14px', boxSize: '15px',},
  {parent: '9', gridNum: '36', addWidth: '20px', addHeight: '20px', closeSize: '12px', camera_m_w: '16px', camera_m_h: '16px', fullSize: '14px', wbeiSize: '16px', IDsize: '12px', Losize: '10px', recw: '25px', rech: '12px', boxSize: '16px',},
]);
</script>

<style scoped lang="scss">
.bgGrid{
  z-index: 111 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%) !important;
}
.svgSure {
  color: #3F83F8;
}

.content {
  color: var(--theme-font-color);
  font-size: 24px;

  #input {
    color: #9CA3AF;
    font-size: 14px;
    border: none;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: solid 2px var(--borderBottom);

    &:focus {
      outline: none;
      box-shadow: inset 0 0;
    }
  }
}

.svgSelect {
  color: var(--layout-nav-svg);
}

.svgAdd {
  color: #3F83F8;
}

.selectBox1 {
  &:hover {
    border: solid #3F83F8 2px;
  }
}

.selectBox {
  transition: all 0.3s;

  &:hover {
    border: solid #3F83F8 2px;
    transform: scale(1.01);
  }
}

:deep(.el-overlay) {
  background-color: rgba(0, 0, 0, 0.3);
}

:deep(.el-drawer) {
  width: 21% !important;
  background-color: var(--theme);
  border-left: solid var(--grid) 1px;
}

#searchCamera {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    font-size: 14px;
    font-family: Medium;
    color: #ffffff;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    &:focus {
      box-shadow: inset 0 0;
    }
  }
}

.list {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.list::-webkit-scrollbar {
  width: 5px;
}

.list::-webkit-scrollbar-thumb {
  background-color: #6B7280;
  border-radius: 10px;
}

.list::-webkit-scrollbar-track {
  background-color: #4C555F;
  border-radius: 10px;
}
@media screen and (min-width: 2560px) {
  .content {
    font-size: 32px;
    #input {
      font-size: 18.67px;
    }
  }

  #searchCamera {
    :deep(input) {
      height: 48px;
      font-size: 18.67px;
    }
  }
  .svg2k{
    transform: scale(1.5);
  }
}
@media screen and (min-width: 3840px) {

  .content {
    font-size: 48px;
    #input {
      font-size: 28px;
    }
  }

  #searchCamera {
    :deep(input) {
      height: 72px;
      font-size: 28px;
    }
  }
}
</style>